<template>
  <div class="map-box">
    <!--显示当前点击的id对应建筑-->
    <message-box :buildId="buildId" :messageShow="messageShow" @changeShow="displayMessage">
    </message-box>
    <!--展示所有创建好的相机-->
    <camera-message :viewer="viewer"></camera-message>
    <!--相机的增删改查功能-->
    <camera-change :viewer="viewer" :scene="scene"></camera-change>
    <!--展示所有创建好的雷达-->
    <radar-message :viewer="viewer"></radar-message>
    <!--雷达的增删改查功能-->
    <radar-change :viewer="viewer" :scene="scene"></radar-change>
    <!--雷达的范围（可更改）-->
    <radar-area :viewer="viewer"></radar-area>
    <div id="cesiumContainer"></div>
  </div>
</template>

<script>
  // js
  import initViewer from 'assets/js/CesiumFun/initCesium/initViewer'
  import LoadModel from 'assets/js/CesiumFun/initCesium/LoadModel'
  import heightLight from 'assets/js/CesiumFun/initCesium/heighLight'

  // 组件
  import MessageBox from 'ToolBar/build/BuildMessageBox'
  import cameraMessage from 'ToolBar/camera/cameraMessage'
  import cameraChange from 'ToolBar/camera/index'
  import radarMessage from 'ToolBar/radar/radarMessage'
  import radarChange from 'ToolBar/radar/index'
  import radarArea from 'ToolBar/radar/changeArea'

  export default {
    name: "No01-init",
    data() {
      return {
        viewer: undefined,
        scene: undefined,
        buildId: 1,
        messageShow: false,
      }
    },
    components: {
      MessageBox,
      cameraMessage,
      cameraChange,
      radarMessage,
      radarChange,
      radarArea
    },
    mounted() {
      // 初始化Cesium
      this.viewer = initViewer();     // 初始化viewer
      this.scene = this.viewer.scene;
      // function
      LoadModel(this.viewer);         // 加载模型
      heightLight(this.viewer)        // 鼠标点击时高亮建筑
      this.buildMessage();            // 显示建筑名称
    },

    methods: {
      // 显示建筑信息
      buildMessage() {
        var extras = this.$store.state.extras       // vuex中的建筑信息
        var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
        // 左键点击显示信息事件
        handler.setInputAction(movement => {
          var pick = this.scene.pick(movement.position);
          this.$store.commit("showCameraUI", false);// 不显示调整相机界面
          this.$store.commit("videoShow", false)    // 不显示监控
          this.$store.commit("showRadarUI", false); // 不显示调整雷达界面
          if (!Cesium.defined(pick) || pick._batchId == undefined) {// 过滤未被Ceisum定义和不是3DTiles的模型
            return
          }
          if (pick.tileset.asset.extras[0].cameraId != undefined) { // 点击的是摄像机
            this.buildId = "camera" + pick.tileset.asset.extras[0].cameraId
          }
          else {
            this.buildId = pick._batchId;// 点击的建筑的id
            this.searchMessage(pick);    // 查看是否定义了建筑信息
          }
          this.messageShow = true;       // 显示信息框

        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
      },
      searchMessage(pick) {// for循环直接写入函数会导致刷新后无法执行for循环
        var extras = this.$store.state.build.extras// vuex中的建筑信息
        for (let i = 0; i < extras.length; i++) {
          if (pick._batchId == extras[i].buildId) {// 定义了id的建筑
            this.buildId = extras[i].buildname
          }
        }
      },
      // 关闭信息框
      displayMessage(item) {
        this.messageShow = item
      },
    }
  };
</script>
<style scoped>
  @import '~assets/css/Cesium/Cesium.css';
</style>